import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Router } from 'utils/router';
import Loadable from 'utils/loadable';
import ProjectSettingsNav from './nav';
import { Header, Body, SideBar, BodyContent, Content } from '@alife/devops-ui';
import * as actions from '../actions/index';
import { updateData } from '../pages/settingsBranches/actions';
import intl from '../../../../../../../locale';

const { pathResource } = window.FORCE;

const Settings = Loadable({
  loader: () => import('../pages/settings'),
});

const SettingsBranches = Loadable({
  loader: () => import('../pages/settingsBranches'),
});

const SettingsPushRules = Loadable({
  loader: () => import('../pages/settingsPushRules'),
});

const SettingsMergerequests = Loadable({
  loader: () => import('../pages/settingsMergerequests'),
});

const SettingsDeploykeys = Loadable({
  loader: () => import('../pages/settingsDeploykeys'),
});

const SettingsWebhooks = Loadable({
  loader: () => import('../pages/settingsWebhooks'),
});

const Services = Loadable({
  loader: () => import('../pages/services'),
});

const LFS = Loadable({
  loader: () => import('../pages/settingsLfs'),
});

const Backup = Loadable({
  loader: () => import('../pages/settingsBackup'),
});

const MirrorSync = Loadable({
  loader: () => import('../pages/settingsMirrorSync'),
});

class Root extends Component {
  componentDidMount() {
    this.props.getIsResourceUnLimit();
    this.props.getLfsInfo();
  }

  renderMain = () => {
    return (
      <Router basepath={`/${pathResource.fullPath}/settings`} primary={false}>
        <Settings path="/" />
        <SettingsBranches path="/branches" />
        <SettingsPushRules path="/push_rules" />
        <SettingsMergerequests path="/merge_requests" />
        <SettingsDeploykeys path="/deploykeys" />
        <SettingsWebhooks path="/webhooks" />
        <Services path="/services" />
        <LFS path="/lfs" />
        <Backup path="/back_up" />
        <MirrorSync
          path="/mirror_sync"
          getMirrorSyncSettings={this.props.getMirrorSyncSettings}
          updateOverViewData={this.props.updateOverViewData}
        />
      </Router>
    );
  };

  render() {
    const { pathname } = window.location;
    const tabTitle = pathname.split('/');
    const defaultActiveKey = tabTitle.slice(tabTitle.length - 1).join();
    const { isBranchCompleted } = this.props.settingsBranches;
    const { has_deploy_keys } = this.props.root;
    return (
      <>
        <Header
          title={intl.get({
            id: 'code-assets.projectSettings.containers.root.Set',
            defaultMessage: '设置',
          })}
          marginLarge
        />
        <Body>
          <SideBar closeable size="small">
            <ProjectSettingsNav
              defaultActiveKey={defaultActiveKey}
              has_deploy_keys={has_deploy_keys}
              isBranchCompleted={isBranchCompleted}
              updateBranchStatus={this.props.updateBranchStatus}
            />
          </SideBar>
          <BodyContent>
            <Content>{this.renderMain()}</Content>
          </BodyContent>
        </Body>
      </>
    );
  }
}

export default connect(
  (state) => state.project.projectSettings,
  (dispatch) => bindActionCreators({ ...actions, updateBranchStatus: updateData }, dispatch),
)(Root);
